<template>
  <div class="view-school" v-loading="loading || gettingData">
    <header class="header">
      <div class="header-left">
        <div class="school-info">
          <span class="school-name">{{ schoolName }}</span>
          <span class="school-type">{{ schoolType }}</span>
          <span class="school-id">ID：{{ schoolId }}</span>
        </div>
        <div class="school-location" v-if="schoolLocationText">
          <i class="el-icon-location"></i>
          <span>{{ schoolLocationText }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-button 
          type="primary" 
          icon="el-icon-upload2" 
          size="medium"
          @click="importData"
        >导入师生</el-button>
        <el-button 
          type="info" 
          icon="el-icon-download" 
          size="medium"
          @click="exportData"
        >导出师生</el-button>
        <el-button 
          plain 
          icon="el-icon-back" 
          size="medium"
          v-if="!isOnlyOneSchool" 
          @click="goback"
        >返回</el-button>
      </div>
    </header>
    <main class="main">
      <div class="nav-wrapper">
        <router-link
          v-for="item in navList"
          :key="item.name"
          class="nav-item"
          :to="{
            name: item.name,
            params: { schoolId: $route.params.schoolId },
          }"
        >
          <i :class="getNavIcon(item.name)"></i>
          <span>{{ item.label }}</span>
        </router-link>
      </div>
      <div class="view-wrapper">
        <router-view
          v-if="!gettingData"
          ref="child"
          :updateMsg="updateMsg"
          :schoolName="schoolName"
        >
        </router-view>
      </div>
    </main>
  </div>
</template>

<script>
import { downloadExcelBlob } from '@/utils/utils';
import studentComp from '@/components/schoolmanage/studentComp.vue';
import teacherComp from '@/components/schoolmanage/teacherComp.vue';
import classComp from '@/components/schoolmanage/classComp.vue';
import { mapState, mapGetters, mapActions } from 'vuex';
const navList = [
  { label: '学生管理', name: 'student' },
  { label: '教师管理', name: 'teacher' },
  { label: '教学管理', name: 'class' },
];
export default {
  name: 'ViewSchool',
  components: {
    studentComp,
    teacherComp,
    classComp,
  },
  props: ['schoolId'],
  data() {
    return {
      gettingData: true,
      loading: false,
      updateMsg: 1,
      navList: [],
      nav: { name: '学生管理', component: 'student' },
    };
  },

  async created() {
    this.getNavList();
    await Promise.all([
      this.GET_SCHOOL_DETAIL({
        school_id: this.schoolId,
      }),
      this.GET_SCHOOL_OPTIONS({
        school_id: this.schoolId,
      }),
    ]);
    this.gettingData = false;
  },
  computed: {
    ...mapState('base', ['isFromExamWeb']),
    ...mapState('user', ['userInfo']),
    ...mapGetters('user', ['isSuperAdmin', 'userPermission']),
    ...mapGetters('school', [
      'schoolName',
      'schoolType',
      'schoolAdmin',
      'schoolLocation',
    ]),
    isStudentView() {
      return this.nav.name === '学生管理';
    },
    isOnlyOneSchool() {
      return this.userPermission?.school_list?.length === 1;
    },
    schoolLocationText() {
      if (!this.schoolLocation) return '';
      else {
        const { F_prov_name, F_city_name, F_district_name } =
          this.schoolLocation;
        return `${F_prov_name}-${F_city_name}-${F_district_name}`;
      }
    },
  },

  methods: {
    ...mapActions('school', ['GET_SCHOOL_DETAIL', 'GET_SCHOOL_OPTIONS']),
    getNavList() {
      const { role } = this.userInfo;
      if (role === '班主任') {
        this.navList = JSON.parse(
          JSON.stringify(navList.filter((e) => e.name === '学生管理'))
        );
      } else {
        this.navList = JSON.parse(JSON.stringify(navList));
      }
    },
    async changeNav(nav) {
      await this.GET_SCHOOL_OPTIONS({
        school_id: this.schoolId,
      });
      this.nav = nav;
    },
    goback() {
      if (this.isFromExamWeb) window.close();
      else this.$router.replace('/homepage/schoolManage');
    },
    importData() {
      this.$import(this.schoolId, this.$maps.importType.SCHOOL, async () => {
        this.$toast('批量导入学校数据成功');
        await this.GET_SCHOOL_OPTIONS({
          school_id: this.schoolId,
        });
        this.updateMsg++;
      });
    },
    async exportData() {
      this.loading = true;
      try {
        const res = await this.$api.exportSchoolData({
          F_school_id: this.schoolId,
        });
        console.log(res);
        downloadExcelBlob(res, `${this.schoolName}信息`);
      } catch (e) {
        console.error(e);
        this.$toast('导出学校信息失败,请联系后台管理员');
      }
      this.loading = false;
    },
    async exportStudent() {
      this.loading = true;
      try {
        const { grade, classItem, gender, studentName } = this.$refs.child;
        const res = await this.$api.exportStudentAccount({
          F_grade: grade.id,
          F_class_id: classItem?.F_class_id,
          F_gender: gender?.id,
          F_name: studentName,
          F_school_id: this.schoolId,
        });
        downloadExcelBlob(res, `${this.schoolName}-学生账号`);
        this.$toast('导出学生账号成功');
      } catch (e) {
        console.error(e);
        this.$toast('导出失败，请联系后台成员');
      }
      this.loading = false;
    },
    getNavIcon(name) {
      switch(name) {
        case 'student':
          return 'el-icon-user';
        case 'teacher':
          return 'el-icon-user-solid';
        case 'class':
          return 'el-icon-notebook-2';
        default:
          return 'el-icon-s-grid';
      }
    }
  },
};
</script>

<style lang="less" scoped>
.view-school {
  width: 100%;
  height: 100%;
  color: #606266;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .header {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 16px 24px;
    margin-bottom: 16px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: flex-start;
      
      .header-right {
        margin-top: 16px;
        align-self: flex-end;
      }
    }
    
    .header-left {
      display: flex;
      flex-direction: column;
      
      .school-info {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        
        .school-name {
          font-size: 20px;
          color: #303133;
          font-weight: bold;
        }
        
        .school-type {
          display: inline-block;
          margin: 0 12px;
          padding: 2px 10px;
          font-size: 12px;
          border-radius: 15px;
          color: #ff7b37;
          background-color: rgba(255, 123, 55, 0.1);
        }
        
        .school-id {
          color: #909399;
          font-size: 14px;
        }
      }
      
      .school-location {
        display: flex;
        align-items: center;
        color: #909399;
        font-size: 14px;
        
        i {
          margin-right: 5px;
          color: #40DBBC;
        }
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
  
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    
    .nav-wrapper {
      display: flex;
      padding: 0 24px;
      border-bottom: 1px solid #ebeef5;
      
      .nav-item {
        padding: 16px 20px;
        margin-right: 24px;
        color: #606266;
        font-size: 15px;
        text-decoration: none;
        display: flex;
        align-items: center;
        position: relative;
        transition: all 0.3s;
        
        &:last-child {
          margin-right: 0;
        }
        
        i {
          margin-right: 6px;
          font-size: 16px;
        }
        
        &:hover {
          color: #40DBBC;
        }
      }
      
      .router-link-active {
        color: #40DBBC;
        font-weight: bold;
        position: relative;
        
        &::after {
          content: '';
          display: block;
          width: 30px;
          height: 3px;
          background-color: #40DBBC;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 2px;
        }
      }
    }
    
    .view-wrapper {
      flex: 1;
      overflow: auto;
      padding: 16px;
    }
  }
}

/* 自定义滚动条 */
.view-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.view-wrapper::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 3px;
}

.view-wrapper::-webkit-scrollbar-track {
  background-color: #f5f7fa;
  border-radius: 3px;
}
</style>

<style lang="less">
.view-school {
  /* 表格相关样式 */
  .el-table {
    border-radius: 4px;
    overflow: hidden;
    
    th.el-table__cell {
      background-color: #f5f7fa !important;
      color: #606266;
      font-weight: bold;
    }
    
    /* 鼠标悬停效果 */
    tr.el-table__row:hover > td.el-table__cell {
      background-color: #f0f7ff !important;
    }
    
    /* 表格中的按钮样式 */
    .btn {
      color: #409EFF;
      display: inline-block;
      margin-right: 10px;
      cursor: pointer;
      
      &:last-child {
        margin-right: 0;
      }
      
      &:hover {
        color: #66b1ff;
      }
    }
  }
  
  /* 按钮样式自定义 */
  .el-button--primary {
    background-color: #409EFF;
    border-color: #409EFF;
    
    &:hover, &:focus {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
  
  .el-button--info {
    background-color: #909399;
    border-color: #909399;
    
    &:hover, &:focus {
      background-color: #a6a9ad;
      border-color: #a6a9ad;
    }
  }
}
</style>
